import { Modal } from 'antd'
import { useEffect } from 'react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ListCard from '../../components/ListCard'
import MyCard from '../../components/MyCard'
import { GrayRight, GreenRight } from '../../components/MyIcon'
import './index.css'

export default () => {
  const navigate = useNavigate()
  const [modal, contextHolder] = Modal.useModal()
  const [lastStudy, setLastStudy] = useState([])
  const [review, setReview] = useState([])
  useEffect(() => {
    if (!localStorage.getItem('info')) {
      modal.error({
        title: '权限错误!',
        content: '当前用户未登录，请先前往登录界面登录',
        onOk: () => {
          navigate('/center/login')
        }
      })
      return
    }
    let temp = JSON.parse(localStorage.getItem('history'))
    if (temp === null) {
      temp = []
    }
    setLastStudy(temp)
  }, [])

  useEffect(() => {
    const review = new Set()
    for (let i = lastStudy.length - 1; i > (lastStudy.length * 2) / 3; i--) {
      review.add({ key: lastStudy[i].date, ...lastStudy[i], isFinish: false })
    }
    setReview([...review])
  }, [lastStudy])
  return (
    <div className="StudyRecord">
      <MyCard style={{ flex: '1', margin: '0 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h3>上次学到了...</h3>
          <svg width="30" height="30" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5.12695 5.12695L2.80273 2.80273C1.77051 1.77051 0 2.50195 0 3.95801V11.4844C0 12.3936 0.731445 13.125 1.64062 13.125H9.16699C10.6299 13.125 11.3613 11.3545 10.3291 10.3223L8.22363 8.2168C10.5957 5.84473 13.877 4.375 17.5 4.375C24.7461 4.375 30.625 10.2539 30.625 17.5C30.625 24.7461 24.7461 30.625 17.5 30.625C14.7109 30.625 12.127 29.7568 10.001 28.2734C9.00977 27.583 7.64941 27.8223 6.95215 28.8135C6.25488 29.8047 6.50098 31.165 7.49219 31.8623C10.3359 33.8379 13.7881 35 17.5 35C27.166 35 35 27.166 35 17.5C35 7.83398 27.166 0 17.5 0C12.667 0 8.29199 1.96191 5.12695 5.12695ZM17.5 8.75C16.5908 8.75 15.8594 9.48145 15.8594 10.3906V17.5C15.8594 17.9375 16.0303 18.3545 16.3379 18.6621L21.2598 23.584C21.9023 24.2266 22.9414 24.2266 23.5771 23.584C24.2129 22.9414 24.2197 21.9023 23.5771 21.2666L19.1338 16.8232V10.3906C19.1338 9.48145 18.4023 8.75 17.4932 8.75H17.5Z"
              fill="#FF6741"
            />
          </svg>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          {lastStudy.map((item, index) => {
            return (
              <ListCard style={{ display: 'flex', justifyContent: 'left' }}>
                <label style={{ marginRight: '5px' }}>{index + 1}</label>
                <a
                  onClick={() => {
                    let history = JSON.parse(localStorage.getItem('history'))
                    if (history === null) {
                      history = []
                    }
                    const date = new Date()
                    history.unshift({
                      course_name: item.course_name,
                      course_url: item.course_url,
                      date: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
                    })
                    setLastStudy(history)
                    localStorage.setItem('history', JSON.stringify(history))
                  }}
                  target="_blank"
                  href={item.course_url}
                >
                  {item.course_name}
                </a>
              </ListCard>
            )
          })}
        </div>
      </MyCard>
      <MyCard style={{ flex: '1', margin: '0 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h3>你已经很久没有复习以下内容啦，温故而知新哦~</h3>
          <svg width="31" height="35" viewBox="0 0 31 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.64286 0C2.97545 0 0 2.93945 0 6.5625V28.4375C0 32.0605 2.97545 35 6.64286 35H26.5714H28.7857C30.0105 35 31 34.0225 31 32.8125C31 31.6025 30.0105 30.625 28.7857 30.625V26.25C30.0105 26.25 31 25.2725 31 24.0625V2.1875C31 0.977539 30.0105 0 28.7857 0H26.5714H6.64286ZM6.64286 26.25H24.3571V30.625H6.64286C5.41808 30.625 4.42857 29.6475 4.42857 28.4375C4.42857 27.2275 5.41808 26.25 6.64286 26.25ZM8.85714 9.84375C8.85714 9.24219 9.35536 8.75 9.96428 8.75H23.25C23.8589 8.75 24.3571 9.24219 24.3571 9.84375C24.3571 10.4453 23.8589 10.9375 23.25 10.9375H9.96428C9.35536 10.9375 8.85714 10.4453 8.85714 9.84375ZM9.96428 13.125H23.25C23.8589 13.125 24.3571 13.6172 24.3571 14.2188C24.3571 14.8203 23.8589 15.3125 23.25 15.3125H9.96428C9.35536 15.3125 8.85714 14.8203 8.85714 14.2188C8.85714 13.6172 9.35536 13.125 9.96428 13.125Z"
              fill="#FF6741"
            />
          </svg>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          {review.map((item, index) => {
            return (
              <div key={item.key} style={{ padding: '0 20px', width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <ListCard style={{ display: 'flex', justifyContent: 'left' }}>
                  <label style={{ marginRight: '5px' }}>{index + 1}</label>
                  <a
                    onClick={() => {
                      let history = JSON.parse(localStorage.getItem('history'))
                      if (history === null) {
                        history = []
                      }
                      const date = new Date()
                      history.unshift({
                        course_name: item.course_name,
                        course_url: item.course_url,
                        date: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
                      })
                      setLastStudy(history)
                      localStorage.setItem('history', JSON.stringify(history))
                    }}
                    target="_blank"
                    href={item.course_url}
                  >
                    {item.course_name}
                  </a>
                </ListCard>
                <div
                  style={{ cursor: 'pointer' }}
                  onClick={e => {
                    const temp = []
                    review.forEach(it => {
                      if (item.key === it.key) {
                        it.isFinish = !it.isFinish
                      }
                      temp.push(it)
                    })
                    setReview(temp)
                  }}
                >
                  {item?.isFinish ? <GreenRight style={{ boxSize: 'border-box', padding: '5px', transitionDuration: '0.5s' }} /> : <GrayRight style={{ cursor: 'pointer', transitionDuration: '0.5s' }} />}
                </div>
              </div>
            )
          })}
        </div>
      </MyCard>
      {contextHolder}
    </div>
  )
}
